<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            margin: 100px auto 0;
            width: 400px;
            height: 350px;
        }
        .row {
            display: flex;
            flex-direction: row;
        }
        .box {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="main"></div>
    <script>
        const plate = [];
        const paths = [];
        const colors = [];
        const shapes = {};
    </script>
    <script>
        function getColor(name) {
            const index = Number(name.replace('NO', '')) - 1;
            return colors[index];
        }

        function draw() {
            const $main = document.querySelector('.main');
            let dom = '';
            for (const row of plate) {
                dom += '<div class="row">';
                for (const cel of row) {
                    const color = cel === 1 ? '#ccc' : cel;
                    dom += `<div class="box" style="background-color:${color};"></div>`;
                }
                dom += '</div>';
            }
            $main.innerHTML = dom;
        }

        function main() {
            let index = -1;
            for (const { i, j, k, name } of paths) {
                index++;
                const shape = shapes[name][k];

                let rowIndex = -1;
                for (const row of shape) {
                    rowIndex++;
                    let celIndex = -1;

                    for (const cel of row) {
                        celIndex++;

                        const x = i + rowIndex;
                        const y = j + celIndex;

                        if (cel === 0) continue;
                        if (plate[x][y] !== 0) {
                            console.log({ cel, index, i, j, k, name, x, y, shape }, plate[x][y]);
                            throw new Error('参数异常');
                        }

                        const color = getColor(name);
                        plate[x][y] = color;
                    }
                }
            }

            draw();
        }

        main();
    </script>
</body>
</html>